﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TemplateFoundation.Tests.Web.DynamicImageProcessor.Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <h1>Desert</h1>

        <h2>Original image</h2>
        <h3>Without height and width specified</h3>
        <img src="Images/Desert.jpg" alt="Desert" />

        <h3>With height and width specified to original dimensions</h3>
        <img src="Images/Desert.jpg?w=1024&h=768" alt="Desert" />
        
        <h2>Setting Width <em>or</em> height</h2>

        <h3>200 pixel width</h3>
        <img src="Images/Desert.jpg?w=200" alt="Desert" />
        
        <h3>200 pixel height</h3>
        <img src="Images/Desert.jpg?h=200" alt="Desert" />
        
        <h2>Width and height with and without fixed aspect ratio</h2>

        <h3>300 pixel width, 100 pixel height, fixed ratio</h3>
        <img src="Images/Desert.jpg?w=300&h=100" alt="Desert" />

        <h3>300 pixel width, 100 pixel height, variable ratio</h3>
        <img src="Images/Desert.jpg?w=300&h=100&r=false" alt="Desert" />

        <h2>Size and cropping combinations</h2>

        <h3>300 pixel width, 100 pixel crop height</h3>
        <img src="Images/Desert.jpg?w=300&ch=100" alt="Desert" />
        
        <h3>300 pixel crop width, 300 pixel crop height</h3>
        <img src="Images/Desert.jpg?cw=300&ch=300" alt="Desert" />

        <h3>300 pixel width, 300 pixel height, allow up-scaling, keep ratio</h3>
        <img src="Images/Desert.jpg?w=300&h=300&up=true" alt="Desert" />

        <h3>300 pixel width, 300 pixel height, allow up-scaling, variable ratio</h3>
        <img src="Images/Desert.jpg?w=300&h=300&up=true&r=false" alt="Desert" />

        <h1>Crop offsets</h1>
        <p>By default cropping is done towards the center of the image.</p>
        <ul>
            <li>When cropping on the Y-axis (height) we crop the top and bottom of the image.</li>
            <li>
                <ul>
                    <li>A Y-offset of zero means we only crop from the bottom.</li>
                    <li>A Y-offset of 50 means we crop 50 pixels off the top and the rest from the bottom.</li>
                </ul>
            </li>
            <li>When cropping on the X-axis (width) we crop the left and right of the image.</li>
            <li>
                <ul>
                    <li>An X-offset of zero means we only crop from the right.</li>
                    <li>An X-offset of 50 means we crop 50 pixels off the left and the rest from the right.</li>
                </ul>
            </li>
        </ul>  

        <h2>300 pixel crop width, 300 pixel height, default offset</h2>
        <img src="Images/Desert.jpg?cw=300&h=300" alt="Desert" />

        <h2>300 pixel crop width, 300 pixel height, no offset</h2>
        <img src="Images/Desert.jpg?cw=300&h=300&ox=0" alt="Desert" />

        <h2>300 pixel crop width, 300 pixel height, 100 pixel X-offset</h2>
        <img src="Images/Desert.jpg?cw=300&h=300&ox=100" alt="Desert" />

        <h2>300 pixel width, 100 pixel crop height, default offset</h2>
        <img src="Images/Desert.jpg?w=300&ch=100" alt="Desert" />

        <h2>300 pixel width, 100 pixel crop height, no offset</h2>
        <img src="Images/Desert.jpg?w=300&ch=100&oy=0" alt="Desert" />

        <h2>300 pixel width, 100 pixel crop height, 100 pixel Y-offset</h2>
        <img src="Images/Desert.jpg?w=300&ch=100&oy=100" alt="Desert" />

        <h2>Rendering quality</h2>
        
        <h2>200 pixel width, 100 pixel crop height, default quality</h2>
        <img src="Images/Desert.jpg?w=200&ch=100" alt="Desert" />

        <h2>200 pixel width, 100 pixel crop height, high quality</h2>
        <img src="Images/Desert.jpg?w=200&ch=100&hq=true" alt="Desert" />

    </form>
</body>
</html>
